﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <script>
        dojo.require("esri.map");
        dojo.require("esri.dijit.OverviewMap");
        dojo.require("esri.toolbars.navigation");
        var myMap;
        function init() {
            myMap = new esri.Map("map1", { logo: true });
            navToolbar = new esri.toolbars.Navigation(myMap);
            var layer1 = new esri.layers.ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
            myMap.addLayer(layer1);
            myMap.setZoom(4);
            var div1 = dojo.byId("div1");
            var div2 = dojo.byId("div2");
            var button1 = dojo.byId("Button1");
            var button2 = dojo.byId("Button2");
            var button3 = dojo.byId("Button3");
            var button4 = dojo.byId("Button4");
            var button5 = dojo.byId("Button5");
            var button6 = dojo.byId("Button6");
            var button7 = dojo.byId("Button7");
            var button8 = dojo.byId("Button8");
            var button9 = dojo.byId("Button9");
            dojo.connect(myMap, "onMouseMove", function (e) {
                var mp = e.mapPoint;
                var sp = e.screenPoint;
                div1.innerHTML = mp.x + "/" + sp.x;
                div2.innerHTML = mp.y + "/" + sp.y;
                
            });
            dojo.connect(button1, "click", function (evt) {

                navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);

            });
            dojo.connect(button2, "click", function (evt) {

                navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);


            });
            dojo.connect(button3, "click", function (evt) {

                myMap.panUp();


            });
            dojo.connect(button4, "click", function (evt) {

                myMap.panDown();


            });
            dojo.connect(button5, "click", function (evt) {

                myMap.panLeft();


            });
            dojo.connect(button6, "click", function (evt) {

                myMap.panRight();


            });
            dojo.connect(button7, "click", function (evt) {

                navToolbar.zoomToFullExtent()
                ;


            });
            dojo.connect(button8, "click", function (evt) {

                navToolbar.activate(esri.toolbars.Navigation.PAN);



            });



            dojo.connect(button9, "click", function (evt) {

                var overviewMap = new esri.dijit.OverviewMap({
                    map: myMap,
                    visible: true
                });
                overviewMap.startup();


            });
        }

        dojo.addOnLoad(init)
    </script>
</head>
<body>
    <div id="map1" style=" width:900px; height:500px"></div>
    <div id="div1"></div>
    <div id="div2"></div>
    <table style="width: 100%;">
        <tr>
            <td>
                <input id="Button1" type="button" value="放大" /><input id="Button2" type="button" value="缩小" /><input id="Button3" type="button" value="上移" /><input id="Button4" type="button" value="下移" /><input id="Button5" type="button" value="左移" /><input id="Button6" type="button" value="右移" /><input id="Button7" type="button" value="全屏" /><input id="Button8" type="button" value="拖动" /><input id="Button9" type="button" value="鹰眼" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        </table>
</body>
</html>
